<template>
  <div>
    <div v-if="!$route.params.apy">
      <account-card title="申请发票"/>
      <div class="invoice">
        <div class="surplus_money">
          <p>可开取发票金额</p>
          <p>{{formatterNumber(1008611.00)}}</p>
        </div>
        <div class="el-icon-arrow-right" @click="apyInvoice"/>
      </div>
    </div>

    <div v-else>
      <div class="invoice-apy">
        <div class="invoice-apy-title">
          <h4 @click="changeTab(1)" :class="tab===1 && 'active'">专用发票</h4>
          <h4 @click="changeTab(2)" :class="tab!==1 && 'active'">普通发票</h4>
        </div>
        <div class="invoice-apy-form">
          <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="90px" class="invoice-lable">
            <el-form-item prop="invoiceTitle" label="公司名称">
              <el-input v-model="formData.invoiceTitle" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <!--            <el-form-item prop="name" label="名称" v-if="tab===2">-->
            <!--              <el-input v-model="formData.name" placeholder="请输入名称"></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item prop="socialCreditUnifiedCode" label="公司税号">
              <el-input v-model="formData.socialCreditUnifiedCode" placeholder="填写纳税人识别号"></el-input>
            </el-form-item>

            <el-form-item prop="mailAddr" label="公司地址">
              <el-input v-model="formData.mailAddr" placeholder="填写公司地址"></el-input>
            </el-form-item>

            <el-form-item prop="openingBank" label="公司开户行">
              <el-input v-model="formData.openingBank" placeholder="填写公司开户行账号"></el-input>
            </el-form-item>

            <el-form-item label="总金额">
              <p class="el-input money">{{formatterNumber(formData.invoiceMoney)}} </p>
            </el-form-item>

            <account-card title="申请发票"/>

            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="用于向您发送电子发票"></el-input>
            </el-form-item>

            <el-form-item label="接收人电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="填写电话话码"></el-input>
            </el-form-item>

            <el-form-item>
              <div style="width: 100%;text-align: center;margin-top: 20px">
                <el-button type="primary" style="width: 150px" size="mini" @click="submitForm('ruleForm')">
                  提交
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <template v-if="!$route.params.apy">
      <div style="height: 40px"></div>
      <account-card title="发票明细"/>
      <el-table
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column
            v-for="item of tableAry"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align='item.align'
            :key="item.prop"
        >
          <div v-if="item.render" slot-scope="scope">
            <el-tag :type="scope.row[item.prop]" effect="dark">{{handleStatus(scope.row[item.prop])}}</el-tag>
          </div>
          <div v-else slot-scope="scope">
            {{scope.row[item.prop]}}
          </div>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
  import AccountCard from "../../account/components/AccountCard"
  import {getInvoiceList, apyInvoice} from "@/api/service"

  const tableAry = [
    {
      prop: 'serviceStartTime',
      label: '服务开始时间',
      align: 'left'
    },
    {
      prop: 'serviceEndTime',
      label: '服务结束时间',
    },
    {
      prop: 'paymentAmount',
      label: '发票金额',
    },
    {
      prop: 'dealType',
      label: '成交类型',
      align: 'right'
    }
  ]
  export default {
    name: "",
    data() {
      const validateMail = (rule, value, callback) => {
        if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value) && value) {
          return callback(`邮箱格式不正确`);
        }
        callback();
      }
      return {
        tab: 1, // 1：专用发票,2：普通发票
        formData: {
          invoiceTitle: '', // 公司名称
          socialCreditUnifiedCode: '', // 公司税号
          mailAddr: '', // 公司地址
          invoiceMoney: 100,
          openingBank: '',// 公司开户行
          email: '', // 邮箱号
          phone: ''

        },
        tableAry,
        tableData: [],
        rules: {
          invoiceTitle: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
          socialCreditUnifiedCode: [{required: true, message: '填写纳税人识别号', trigger: 'blur'}],
          email: [{required: false, validator: validateMail, trigger: 'blur'}],
        }
      }
    },
    components: {
      AccountCard
    },
    created() {
      this.getInvoiceList()
    },
    methods: {
      async getInvoiceList() {
        if (this.$route.params.apy) return;
        const result = await getInvoiceList()
        this.handleResult(result, () => {
          this.tableData = result.data;
        })
      },
      handleStatus(type) {
        const obj = {
          'success': '成功',
          info: ' 申请中',
          danger: '失败',
        }
        return obj[type]
      },
      changeTab(tab) {
        this.tab = tab;
        this.$refs['ruleForm'].clearValidate()
      },
      apyInvoice() {
        this.$router.history.push("/personCenter/invoice_apy/apy")
      },
      formatterNumber(num, val = 2) {
        let nwe_num = parseFloat(num, 10);
        const _num = nwe_num.toLocaleString();
        const [integer, decimal] = _num.split('.');
        const _decimal = decimal || '';

        if (val === 0) return integer;
        return integer + '.' + _decimal.padEnd(val, '0');
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let params = {
              ...this.formData,
              invoiceType: this.tab
            }
            let result = await apyInvoice(params);
            this.handleResult(result, () => {
              this.getInvoiceList(); // 获取列表数据
              this.$router.replace("/personCenter/invoice_apy");
              this.$message({
                message: '开取发票成功，等候邮件通知！',
                type: 'success'
              })
            })
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .invoice {
    color: #333333;
    width: 100%;
    height: 132px;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 rgba(73, 73, 73, 0.3);
    border-radius: 3px;
    display: flex;
    justify-content: space-between;

    .surplus_money {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & > p:nth-child(1) {
        height: 12px;
        font-size: 12px;
        line-height: 12px;
      }

      & > p:nth-child(2) {
        font-size: 26px;
        font-weight: 600;
        line-height: 12px;

        &::before {
          content: '¥';
          font-size: 16px;
        }
      }
    }

    .el-icon-arrow-right {
      cursor: pointer;
      color: #bab6b6;
      align-self: center;
      font-size: 36px;
    }
  }

  .invoice-apy {
    .invoice-apy-title {
      display: flex;
      height: 38px;
      line-height: 38px;
      border-radius: 4px 4px 0px 0px;

      & > h4 {
        width: 50%;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        text-align: center;
        cursor: pointer;
        transition: all 300ms;
        border-bottom: 1px solid #CBCBCB;
      }

      .active {
        background: #EDD9B6;
        border-bottom: 0;
      }
    }

    .invoice-apy-form {
      /*height: 441px;*/
      box-shadow: 0px 1px 3px 0px rgba(73, 73, 73, 0.3);
      border-radius: 3px;

      ::v-deep .invoice-lable {
        padding: 18px 30px;
        margin: 35px auto 0;

        .el-input__inner {
          border-radius: 0 !important;
          border: none;
          border-bottom: 1px solid #EDEDED;
          padding: 0;
        }

        .el-input {
          width: calc(100% - 30px);
          margin-left: 30px;
        }

        .el-form-item__error {
          left: 30px
        }

        .account_card {
          background: #EDD9B6;
          margin-bottom: 18px;
        }
      }

      .money {
        font-size: 20px;
        font-weight: 400;
        color: #2D80B4;

        &::after {
          content: '/ 元';
          font-size: 12px;
          font-weight: 600;
          color: #333333;
        }
      }
    }
  }
</style>